<!--
 * @Description: 权限管理
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-09-09 15:14:07
 * @LastEditTime: 2025-09-26 16:14:59
-->
<template>
  <!-- 树结构表格 使用 row-key -->
  <TablePage
    v-model:cols="tableCols"
    v-model:toolsOptions="toolsOptions"
    v-model:rowBtnsOptions="rowBtnsOptions"
    row-key="id"
    :usingPaging="false"
    :listRequest="getPermTree"
    :afterListRequest="afterListRequest"
  >
    <template #parent="editParams">
      <fy-tree-select
        v-model="editParams.val.pid"
        :data="treeSelectData"
        :option="{ children: 'children', label: 'title' }"
      />
    </template>
    <template #icon="editParams">
      <fy-icon-select v-model="editParams.val.icon" />
    </template>
    <template #viewPath="scope">
      <el-select
        v-model="scope.val.viewPath"
        placeholder="搜索路由所指向的文件路径"
        filterable
      >
        <el-option
          v-for="path in viewPaths"
          :key="path"
          :label="path"
          :value="path"
        />
      </el-select>
    </template>
  </TablePage>
</template>

<script lang="ts" setup>
import { ref, computed, Ref } from "vue";
import TablePage from "@/components/TablePage/index.vue";
import { viewModules } from "@/store/helpers";
import useTableCols from "./hooks/useTableCols";
import useToolsOptions from "./hooks/useToolsOptions";
import useRowBtnsOptions from "./hooks/useRowBtnsOptions";
import { deepCopy } from "@/ui";
import { getPermTree } from "@/api/sys";
import { project } from "@/init/config";

// 配置项
defineOptions({ name: "Permission", isFull: true });

// 文件路径
const viewPaths = Object.keys(viewModules).map((item) => item.slice(3));

// 菜单列表tree
const treeData = ref<Permission[]>([]);

// 列表数据处理钩子
const afterListRequest = (dataList: Ref<Permission[]>) => {
  const list = dataList.value;
  dataList.value = list;
  treeData.value = list;
};

// 上级菜单树结构选择数据
const treeSelectData = computed(() => {
  const copyTreeList = deepCopy(treeData.value);
  return [
    {
      id: project.defaultTreeData.ancestorId,
      title: "主类目",
      children: copyTreeList,
    },
  ];
});

// 表格配置
const tableCols = useTableCols();
const toolsOptions = useToolsOptions();
const rowBtnsOptions = useRowBtnsOptions();
</script>
